.ml {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  margin-top: 32px;
  align-items: flex-start;
  grid-auto-rows: max-content;

  &__info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  &__status {
    color: var(--sand_500);
    display: flex;
    align-items: center;
    margin-right: 10px;
    font-size: 12px;
    border: 1px solid var(--color-neutral-border);
    padding: 3px 6px;
    border-radius: 10px;
    max-width: 100px;
  }

  &__summary {
    margin-bottom: 16px;
  }

  &__indicator {
    width: 8px;
    height: 8px;
    display: block;
    margin-right: 8px;
    border-radius: 100%;
    background-color: var(--indicator-color);

    &_state_CO {
      --indicator-color: var(--color-positive-surface);
    }

    &_state_DI {
      --indicator-color: var(--color-warning-surface);
    }

    &_state_ER {
      --indicator-color: var(--color-negative-surface);
    }

    &_state_TR,
    &_state_PR {
      --indicator-color: var(--color-primary-surface);

      position: relative;

      &::before {
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        opacity: 0.5;
        display: block;
        border-radius: 100%;
        background-color: var(--indicator-color);
        animation: state-pulse 2s ease infinite;
      }
    }
  }
}

@keyframes state-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(3);
  }

  100% {
    opacity: 0;
    transform: scale(3);
  }
}
